<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
			 <link rel="stylesheet" href="../bootstrap-3.3.5-dist/css/bootstrap.min.css">  
 			<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
  			<script src="../bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
	
	</head>
	<body style="padding: 100px">
		<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" data-original-title="Tooltip on left">Tooltip on left</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" data-original-title="Tooltip on right">Tooltip on right</button>
	
	<a href="#" data-toggle="tooltip" data-placement="right" title="Some tooltip text!">Hover over me</a>
<script>
	/*$(function(){
		  $('[data-toggle="tooltip"]').tooltip({
		  		template : '<div class="tooltip top" role="tooltip">'+
  								'<div class="tooltip-arrow"></div>'+
  								'<div class="tooltip-inner"></div>'+
							'</div>'
		  });
	});*/
</script>


<!--11 Generated markup by the plugin -->
<!--<div class="tooltip top" role="tooltip">
  <div class="tooltip-arrow"></div>
  <div class="tooltip-inner">
   
  </div>
</div>-->
	<!--  22 -->
	<!--<div class="tooltip" role="tooltip" style="opacity:1">
		<div class="tooltip-arrow"></div>
		<div class="tooltip-inner">xxxxxxxxxxxxxxx</div>
	</div>-->
	
	<input type="checkbox" checked="checked" />
	</body>
</html>
